<script>
import RangeNumber from "@/views/components/RangeNumber";
import { OPERATOR_BASE, OPERATOR_GROUP } from "./operator";

export default {
  components: {
    RangeNumber,
  },
  props: {
    alias: {
      type: String,
      default: "",
    },
    rule: {
      type: Object,
      default() {
        return {};
      },
    },
    configAttributeList: {
      type: Array,
      default() {
        return [];
      },
    },
    saleUsers: {
      type: Array,
      default() {
        return [];
      },
    },
    
    saleManage: {
      type: Array,
      default() {
        return [];
      },
    },
    
    groupList: {
      type: Array,
      default() {
        return [];
      },
    },
    isLastChild: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  inject: ["cityOptions", "ruleTypeOptions"],
  created() {},
  mounted() {
    // console.log('dom== ', this.$refs.ruleValueSelectCom);
  },
  watch: {},
  computed: {
    necessaryRuleValue() {
      const rule = this.rule;
      // 用户属性and运算符不是 空or非空
      return rule.ruleType == "0" && (rule.ruleOperator !== "is not null" && rule.ruleOperator !== "is null");
    },
    ruleKeyOptions() {
      if (this.rule.ruleType == "0") {
        return this.configAttributeList.map((item) => ({ value: item.value, label: item.label }));
      } else if (this.rule.ruleType == "1") {
        return this.groupList;
      }
    },
    configData() {
      const data = this.configAttributeList.find((v) => v.value === this.rule.ruleKey);
      return data || {};
    },
    ruleValueOptions() {
      let config = this.configData;
      if (config.label == "城市") return this.cityOptions;
      if (/销售/.test(config.label)) return this.saleUsers;
      if (/销管/.test(config.label)) return this.saleManage;
      return config.options || [];
    },
    ruleOperatorOptions() {
      if (this.rule.ruleType == "1") {
        return OPERATOR_GROUP;
      } else if (this.rule.ruleType == "0") {
        return OPERATOR_BASE.concat(this.configData.operates || []);
      }

      return [];
    },
  },
  methods: {
    handleChange(key) {
      return () => {
        let keys = ["ruleType", "ruleKey", "ruleOperator", "ruleValue"];
        keys.slice(keys.indexOf(key) + 1).forEach((item) => {
          if (item == "ruleValue" && (this.rule.ruleOperator == "in" || this.rule.ruleOperator == "not in")) {
            let com = this.$refs.ruleValueSelectCom;
            if (com) {
              com.selectedLabel = "";
            }
            this.rule[item] = [];
          } else {
            this.rule[item] = "";
          }
        });
      };
    },
    handleAdd() {
      this.$emit("onaddsecondrule", this.alias);
    },

    handleRemove() {
      this.$emit("onremovesecondrule", this.alias);
    },

    handleModelValue(key) {
      return (v) => {
        this.rule[key] = v;
      };
    },
    createElOptions(list = []) {
      return list.map((item) => {
        return <el-option key={item.value} label={item.label} value={item.value} />;
      });
    },

    getRuleValueComponent() {
      const { configData, rule } = this;
      if (!this.necessaryRuleValue) return null;

      if (configData.type == "select") {
        return (
          <el-select
            value={rule.ruleValue}
            onInput={this.handleModelValue("ruleValue")}
            disabled={!rule.ruleOperator}
            placeholder="请输入"
            filterable
            multiple={rule.ruleOperator == "in" || rule.ruleOperator == "not in"}
            ref="ruleValueSelectCom"
          >
            {this.createElOptions(this.ruleValueOptions)}
          </el-select>
        );
      } else if (configData.type == "range" && rule.ruleOperator == "between") {
        return (
          <range-number
            value={rule.ruleValue}
            onInput={this.handleModelValue("ruleValue")}
            disabled={!rule.ruleOperator}
          />
        );
      } else if (configData.type == "input" || configData.type == "range") {
        return (
          <el-input
            value={rule.ruleValue}
            onInput={this.handleModelValue("ruleValue")}
            disabled={!rule.ruleOperator}
            style="width: 200px"
            placeholder="请手动输入"
          />
        );
      } else if (configData.type == "date") {
        return (
          <el-date-picker
            value={rule.ruleValue}
            onInput={this.handleModelValue("ruleValue")}
            disabled={!rule.ruleOperator}
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type={rule.ruleOperator == "between" ? "daterange" : "date"}
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        );
      }
    },
  },

  render() {
    let ruleData = {
      ruleType: this.ruleTypeOptions, //规则类型
      ruleKey: this.ruleKeyOptions, // 规则主键
      ruleOperator: this.ruleOperatorOptions, //逻辑操作符
    };

    let ruleComponents = Object.keys(ruleData).map((key) => {
      return (
        <el-select
          value={this.rule[key]}
          placeholder="请选择"
          onInput={this.handleModelValue(key)}
          onChange={this.handleChange(key)}
        >
          {this.createElOptions(ruleData[key])}
        </el-select>
      );
    });

    return (
      <div class="d-flex ai-center bg-white">
        <h4 style="padding: 0 20px">{this.alias}</h4>
        <div>
          {...ruleComponents}
          {this.getRuleValueComponent()}
        </div>

        <div style="margin-left: 10px">
          <el-button type="danger" icon="el-icon-delete" size="mini" onClick={this.handleRemove}>
            删除
          </el-button>

          {!this.isLastChild ? null : (
            <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" onClick={this.handleAdd}>
              添加
            </el-button>
          )}
        </div>
      </div>
    );
  },
};
</script>
<style scoped>
>>> .el-select--medium {
  margin: 0 5px;
}
</style>
